<!DOCTYPE html>
<html>
<head>
<!--
  This test verifies that removing a horizontal scrollbar while the vertical
  scrollbar's thumb is being dragged does not reset the vertical scroll offset.
-->
<style>

body {
    margin: 0;
    overflow: hidden;
}
iframe {
    border: 0;
    width: 800px;
    height: 600px;
}
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}
::-webkit-scrollbar-button {
    height: 20px;
    width: 20px;
    background-color: gray;
}
::-webkit-scrollbar-thumb {
    height: 20px;
    width: 20px;
    background-color: blue;
}

</style>
</head>
<body>
<iframe id="f"></iframe>
<script src="../resources/gesture-util.js"></script>
<script>

var frame = document.getElementById("f").contentWindow;
var frameBody = frame.document.body;

frameBody.style.width = "2000px";
frameBody.style.height = "2000px";

frame.addEventListener('scroll', function() {
    if (frameBody.scrollTop > 400)
        frameBody.style.width = "600px";
});

async function runTest() {
    testRunner.waitUntilDone();

    await waitForCompositorCommit();

    // Tell eventSender not to batch mouse move events.
    eventSender.dragMode = false;

    eventSender.mouseMoveTo(790, 50);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(790, 250);

    frame.addEventListener('scroll', finish);
}

function finish() {
    eventSender.mouseMoveTo(790, 350);
    eventSender.mouseUp();

    document.body.innerText = frameBody.scrollTop > 0 ? "PASS" : "FAIL";

    testRunner.dumpAsText();
    testRunner.notifyDone();
}

if (window.testRunner && window.eventSender)
    runTest();
else
    frameBody.innerText = 'Scroll down by dragging the thumb. ' +
        'Test passes if scroll offset does not jump back to 0.';

</script>
</body>
</html>
